<template>
    <view class="page">
        
        <view class="g-product-list">
            <navigator open-type="navigate" class="g-product" v-for="(item,index) in data" :key="index" :url="'/pages/pawn/order_deital?order_id='+item.id" v-if="isGoodsTpye">
                <view class="g-product-pic">
                    <image :src="item.thumb" mode="widthFix"></image>
                </view>
                <view class="g-product-info">
                    <view class="u-product-name f-two-ellipsis">{{item.goods_name}}</view>
                    <view class="g-price">￥<text>{{item.order_amount}}</text></view>
                    <view class="small-text">订单时间&nbsp;&nbsp;{{item.create_time}}</view>
					 <view class="small-text">期限&nbsp;&nbsp;{{item.term_name}}</view>
                </view>
            </navigator>
			<view class="g-product" v-for="(item,index) in data" :key="index" v-if="!isGoodsTpye">
			    <view class="g-product-pic">
			        <image :src="item.thumb" mode="widthFix"></image>
			    </view>
			    <view class="g-product-info">
			        <view class="u-product-name f-two-ellipsis">{{item.goods_name}}</view>
			        <view class="g-price">￥<text>{{item.shop_price}}</text></view>
			        <view class="small-text">完成时间&nbsp;&nbsp;{{item.time}}</view>
			    </view>
			    <image class="u-product-status" src="../../static/icons/user/finish.png" mode="widthFix"></image>
			</view>
        </view>
        <view class="m-no-data" v-if="showNodata">
        	<image src="../../static/images/no_order.png" mode="widthFix"></image>
        </view>
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		</view>
    </view>
</template>

<script>
	import henglang from '../../common/common.js';
    export default {
        data() {
			return {
				data: [],
				sendData: {
					goods_name: '',
					page: 1
				},
				totalPages:1,//总页数
				showNodata: false,
				showLoading: true,
				isGoodsTpye: henglang.isGoodsTpye()
			};
        }, 
        methods: {
           
            request(type) {
				let that = this;
				that.showLoading = true;
				if(!uni.getStorageSync('token')){
					that.showLoading = false;
					that.showNodata = true;
					return false;
				}
				let url = '';
				let data = {};
				if(that.isGoodsTpye){
					url = 'order/termOrder'
					data = that.sendData
				}else{
					url = 'order/demiorder'
					data = {type:3}
				}
				if(that.sendData.page <= that.totalPages){
					
					henglang.get(url,data,true,function(res){
						that.showLoading = false;
						if (!res.data.data.length) {
							that.showNodata = true;
							return false;
						}
						if (type == 'plus') {
							that.data = that.data.concat(res.data.data);
						} else {
						    that.data = res.data.data;
							that.totalPages = res.data.total_pages;
						}
					});					
				}else{
					that.showLoading = false;
				}
            }
        },
        onReady() {
			let that = this;
            this.request();
        },
        onReachBottom() {
			this.sendData.page += 1;
            this.request('plus');
        }
    }
</script>

<style>


    /* 产品 */
    .g-product-list {
        padding: 10px;
    }

    .g-product {
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        margin-bottom: 10px;
        display: flex;
        padding: 10px;
        position: relative;
    }

    .g-product-pic {
        width: 190upx;
        height: 190upx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }
	.g-product-pic image{
		width: 100%;
		height: 100%;
	}
    .g-product-info {
        flex: 1;
        position: relative;
    }

    .g-price {
        font-size: 24upx;
        color: #d71311;
        margin-bottom: 5px;
    }

    .g-price text {
        font-size: 40upx;
    }

    .small-text {
        color: #828080;
    }

    .u-product-buy {
        color: #fff;
        border-radius: 4px;
        padding: 2px 7px;
        font-size: 14px;
        display: inline-block;
    }

    .u-product-buy1 {
        box-shadow: 0 0 10px rgba(215, 21, 17, .5);
        background: #d71511;
        margin: 20upx 50upx 0 120upx;
    }

    .u-product-buy2 {
        color: #D71511;
        border: 1px solid #D71511;
    }
    .u-product-name {
		height: 82upx;
		line-height: 41upx;
    }
    .u-order {
        font-size: 24upx;
        color: #D71511;
        border: 1px solid #D71511;
        border-radius: 2px;
        padding: 0 2px;
		margin-right: 8upx;
    }

    .u-product-status {
        width: 118upx;
		height: 99upx;
        position: absolute;
        right: 10px;
        top: 80upx;
    }
	.u-gray{
		filter: grayscale(100%);
		filter: gray;
	}
</style>
